<template>
    <div class="card" v-for="(item,index) in list" :key="index">
        <div class="d-fix">
            <img src="~@/assets/list/ggao.png" class="lb" />
            <div class="tit1" @click="detail(item)">{{item.title}}</div>
        </div>
        <div class="desc1">
            <div class="date">{{item.ctime}}</div>
            <div class="delete" @click="dels(index)">删除</div>
        </div>
    </div>

    <div class="pages">
        <el-pagination
                small
                layout="prev, pager, next"
                :total="total"
                :page-size="pageSize"
                @current-change="currentChange"
                hide-on-single-page
        ></el-pagination>
    </div>
    <el-dialog v-model="state.outerVisible" title="公告详情"  append-to-body
               destroy-on-close>
        <div class="title-out">标题：{{state.item.title}}</div>
        <div  class="des" v-html="state.item.notice_detail"></div>
        <div v-if="state.item.about_file.length > 0" >
            <div v-for="(item1,index) in state.item.about_file" :key="index" class="d-fix1">
                <div class="img1">
                    <img src="~@/assets/list/file.png" alt="">
                </div>
                <div class="ma-left">
                    <div class="linh-heiht">{{item1.title}}</div>
                    <div class="download" @click="downloadFile(item1.url)">下载</div>
                </div>
            </div>
        </div>
    </el-dialog>
</template>

<script>
    import { getNewsDetail,dekNotice } from "@/request/api";
    import {onMounted, reactive} from "vue";
    import {ElMessage, ElMessageBox} from "element-plus";
    const state = reactive({
        outerVisible: false,
        item: ''
    })
    export default {
        name: "news",
        props: ['list','total','pageSize'],
        setup(props,context) {
            const currentChange = (e) => {
                context.emit('currentChange',e)
            }
            const detail = (item) => {
                state.outerVisible = true
                let data = {
                    notice_id:item.id
                }
                getNewsDetail(data).then(res => {
                    state.item = res.data
                })
            }
            const downloadFile = (url) => {
                window.location.href = url
            }
            //删除公告
            const dels = (index) => {
                let id = props.list[index].id
                ElMessageBox.confirm(
                    '确定要删除公告吗?',
                    '提示',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }
                )
                    .then(() => {
                        let param = {
                            notice_id: id,
                            is_del: 1
                        }

                        dekNotice(param).then(res => {
                            if(res.ret === 200){
                                ElMessage({
                                    type: 'success',
                                    message: '操作成功',
                                })
                                context.emit('delnews',index)
                            }else{
                                ElMessage({
                                    type: 'error',
                                    message: res.msg,
                                })
                            }
                        })
                    })
                    .catch(() => {
                    })
            }
            return {
                currentChange,
                state,
                detail,
                dels,
                downloadFile
            }
        }
    }
</script>

<style scoped>
.title-out {
    margin-bottom: 35px;

    font-weight: bold;
}
.des {
    word-wrap: break-word;
    table-layout: fixed;
    word-break: break-all;
    white-space: pre-wrap;
    max-width: 100%;
    line-height: 25px;
}
    .d-fix1 {
        display: flex;
        margin-top: 20px;
    }
    .linh-heiht {
        margin-top: 22px;
    }
    .download {
        margin-top: 3px;
        cursor: pointer;
    }
    .download:active {
        color: red;
    }
    .delete {
        font-weight: bold;
        cursor:pointer;
        font-size: 14px;
        color: red;
    }
    .desc1 {
        display: flex;
        justify-content: space-between;
    }
</style>
